<template>
	<view>
		<view class="cont_bo" @click="rezmbox">
			<view v-if="cardList.length==0">
				<isEmpty :empty="true" :imgUrl="env.FileUrl+'/food/empty/images/empty_ico02.png'" content="暂无电子卡" />
			</view>
			<view class="cardList" v-else>
				<view class="cardList_item" v-for="(item,index) in cardList" :key="index"
					:style="{border:item.isDefault?'2rpx solid #56BF7A':'2rpx solid #F5F5F5'}" @click="tapItem(item)"
					:class="{grayScale : item.status == '-1'}">
					<!-- <view class="closeIcon" @tap.stop="delCard(item,index)">	<text class="fcon-a-close" style="margin-top:4rpx;display:block"></text></view> -->
					<view class="item_t">
						<view class="item_t_bg"></view>
						<view class="item_t_con">
							<view class="con_top align-start">
								<view class="top_left_text">{{ plusXing(item.phone,3,4)}}</view>
								<view class="top_left_p">
									<text style="font-size: 28rpx;">¥</text>{{item.amount}}
								</view>
							</view>
							<view class="jiesou-style flex align-center justify-between" v-if="item.status == '-1'">
								<text class="fcon-suoding"></text>
								<text class="textstyles">锁定</text>
							</view>
							<!-- <view class="con_tel">
									{{ plusXing(item.phone,3,4)}}
								</view> -->
						</view>

					</view>
					<view class="invs_b"></view>
					<view class="item_bottoms align-center" :class="{'justify-end':item.status=='-1'}">
						<block v-if="item.status !== '-1'">
							<view class="recharge" @click.stop="handelCz(item,index)">充值</view>
							<view class="more_styles text-c6 flex-sub" @click.stop="showMore(item,['fade', 'zoom-in'],index)">
								<view class="padding-tb-xs padding-lr-sm">
									更多
								</view>
								<view class="p_rlt ormbxline">
									<view class="morbox text-center text-lg down" :class="{show:item.show}">
										<view class="p_rlt padding-bottom">
											<view class="mctbox sanjiao bg-white" >
												<view v-for="(itemMenu,listIndex) in item.menuHandle":key="listIndex"  :class="{act: findex==listIndex}" @click.stop="footerSwitch(listIndex,item,itemMenu)" class="mpitm">
													{{ itemMenu.text }}
												</view>
												<!-- <view class="mpitm">
													退款
												</view> -->
											</view>
										</view>
										
									</view>
								</view>
							</view>
							<!-- <uni-transition :show="item.show" :duration="300" :mode-class="modeClass"
								:styles="orderStyles">
								<view class="order-footer-menu">
									<text :class="{ active: findex==listIndex }"
										v-for="(itemMenu,listIndex) in item.menuHandle" :key="listIndex"
										@click.stop="footerSwitch(listIndex,item,itemMenu)">{{ itemMenu.text }}</text>
								</view>
							</uni-transition> -->
							<view class="defPay align-center">
								<view class="flex center padding-tb-xs"
									@click.stop="handelDefa(item.is_default,item.card_no)">
									<view class="defSwitch"
										:style="{backgroundColor:item.is_default=='5'?'#E5F7E9':'rgba(203, 201, 201, 0.30);'}">
										<view :class="item.is_default=='5'?'acSwitch':'unact'"></view>
									</view>
									<view class="swi_text">
										默认支付
									</view>
								</view>
								<!-- <view class="inv_ss"></view> -->
							</view>
						</block>
						<view v-else class="jb_text d_ib padding-tb-xs" @click.stop="handelJ(item.card_no)">解绑</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- <view class="botm_btns">
		<text class="fcon-Subtract" style="font-size: 22rpx;color:#fff;"></text>
		我要绑卡
	</view> -->
	<view class="full_btn fixed  padding-top-lg text-lg">
		<view class="mbtn" @click="mnavTo('/pages/user/bindingCards/bindingCards',true)">
			<text class="fcon-Subtract" style="font-size: 32rpx;color:#fff;"></text>
			我要绑卡
		</view>
		<view v-if="cardList.length==0" class="margin-top-sm mbtnwykk solid" @click="mnavTo('/pages/user/openVip/openVip')">
			<!-- <text class="fcon-Subtract" style="font-size: 32rpx;color:#fff;"></text> -->
			我要开卡
		</view>
	</view>
	<uni-popup ref="isfavRef" zindex type="center" borderRadius="16px 16px 0 0">
		<view class="modelcon">
			<view class="favs">解除绑定</view>
			<view class="fav_v">解除绑定，该卡将无法再次使用，确定继续解绑吗？</view>
			<view class="foot_btn">
				<view class="btns can margin-right" @click="isfavRef.close()">取消</view>
				<view class="btns su" @click="unbind">确定</view>
			</view>
		</view>
	</uni-popup>

	<!-- 电子卡异常 -->
	<uni-popup ref="isCardef" zindex type="center" borderRadius="16px 16px 0 0">
		<view class="modelcon card-popup">
			<view class="favs">电子卡异常</view>
			<view class="fav_v" style="color: #333;">
				<text>该电子卡为锁定状态，请前往最近的门店，联系客服进行解锁。感谢您的配合。</text>
			</view>
			<view class="foot_btn flex justify-center card-btn">
				<view class="btns su" @click="isCardef.close()">好的</view>
			</view>
		</view>
	</uni-popup>
	<loading></loading>
</template>

<script setup lang="ts">
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { env } from '@/api/env.js';
	import { getCardList, unbindCard, setdfCard } from '@/api/vmeitime-http/index.js'
	import isEmpty from '@/components/empty/empty.vue'
	import { showLoading, hideLoading, plusXing } from '@/utils/helper';
	import { mnavTo } from '@/utils/helper';
	import mapi from '@/utils/mapi';

	const linkSource = ref(null)//列表
	// source
	onLoad((options) => {
		orderStyles.value = {
			position: "absolute",
			top: '90rpx',
			left: "280rpx",
			width: "186rpx",
			padding: "10rpx 0",
			flexShrink: 0,
			zIndex: "999",
			borderRadius: '2px 2px 4px 4px',
			backgroundColor: "#fff",
			display: "flex",
			flexDirection: "column",
			justifyContent: "center",
			boxShadow: '0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)'
		}
		linkSource.value = options.source || '';
		loadData('onshow')
	})
	onShow(() => {
		loaded.value && loadData('onshow')
	})
	//下拉刷新
	onPullDownRefresh(() => {
		loadData('onshow')
		uni.stopPullDownRefresh()
		console.log('下拉刷新')
	})
	const cardList = ref([])//列表
	const unbindNo = ref('')//解绑卡号
	const isfavRef = ref()//解绑确认弹窗
	const isCardef = ref() //电子卡异常弹框
	const loaded = ref(false)//解绑卡号
	const findex = ref(0)   //小菜单索引
	const modeClass = ref() ///小菜单动画效果
	const orderStyles = ref()
	//更多
	const showMore = (list : any, type : any, index : any) => {
		console.log('cardList.value--------------------', cardList.value)
		cardList.value.forEach((item : any, idx : number) => {
			// 将除了当前点击的项以外的其他项的 show 属性设为 false
			if (idx !== index) {
				item.show = false;
			}
		});
		cardList.value[index].show = !cardList.value[index].show;
	}
	const rezmbox = ()=>{
		cardList.value.forEach(item=>{
			item.show = false;
		})
	} 
	const footerSwitch = (listIndex : any, item : any, itemMenu) => {
		findex.value = listIndex
		console.log('更多----------------------------------------------', item)
		if (itemMenu.id == '0') {
			handelJ(item.card_no)
			console.log('解绑')
		} else {
			console.log('重置密码')
			mnavTo('/pages/user/passwordReset/passwordReset?card_no=' + item.card_no + '&phone=' + (item.phone || ''))
		}
	}
	const loadData = async (source : string = '') => {
		source == 'onshow' && showLoading()
		try {
			let res = await getCardList()
			loaded.value = true;
			hideLoading()
			if (res.result && res.object) {
				res.object.forEach((item : any) => {
					item.show = false
					item.menuHandle = [
						{
							id: '0',
							text: '解绑'
						},
						{
							id: '1',
							text: '重置密码'
						}
					]
				})
				cardList.value = res.object || [];
			}
		} catch (e) {
			loaded.value = true;
			hideLoading()
		}
	}
	const tapItem = (item) => {
		if (linkSource.value) {
			uni.navigateBack()
			return
		}
		if (item.status == '-1') {
			isCardef.value.open()
			return
		}
		mnavTo('/pages/user/mycardDetial/mycardDetial?carNo=' + item.card_no, true)
	}
	const handelDefa = (isDefault : any, setdfNo : any) => {
		if (isDefault == '5') {
			return
		}
		uni.showModal({
			title: '提示',
			content: '确定将该卡设置为默认么',
			confirmText: '确定',
			confirmColor: '#2AB05E',
			// showCancel: false,
			success: async res => {
				if (res.confirm) {
					try {
						let nres = await setdfCard({ carNo: setdfNo })
						if (nres.result) {
							mapi.msg('设置成功！')
							loadData('set')
						} else {
							hideLoading()
							mapi.msg(nres.shortMessage || '网络繁忙，请稍后再试！')
						}
					} catch (e) {
						hideLoading()
						console.error(e)
					}

				}
			}
		})
	}
	// const delCard=(item:any,index:any)=>{}
	const handelCz = (item : any, index : any) => {
		mnavTo(`/pages/user/recharge/recharge?cardId=${item.card_no}`)
	}
	// 解绑确认弹窗-弹出   
	const handelJ = (num : any) => {
		unbindNo.value = num
		isfavRef.value.open()
	}
	// 解绑
	const unbind = async () => {
		isfavRef.value.close()
		try {
			showLoading()
			let res = await unbindCard({ cardNo: unbindNo.value })
			if (res.result) {
				mapi.msg('解绑成功！')
				loadData('unbind')
			} else {
				hideLoading()
				mapi.msg(res.shortMessage || '网络繁忙，请稍后再试！')
			}
		} catch (e) {
			hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	.full_btn {
		z-index: 999;
	}

	.grayScale {
		filter: grayscale(100%);
	}

	// .order-footer-menu {
	// 	.active {
	// 		background: rgba(76, 162, 123, 0.10);
	// 		color: rgba(76, 162, 123, 0.85);
	// 	}

	// 	text {
	// 		width: 186rpx;
	// 		height: 64.938rpx;
	// 		transition: .5s all;
	// 		justify-content: center;
	// 		display: flex;
	// 		align-items: center;
	// 		font-size: 28rpx;
	// 	}
	// }

	// .more_styles {
	// 	color: #666;
	// 	text-align: center;
	// 	font-family: "Microsoft YaHei UI";
	// 	font-size: 28rpx;
	// 	font-style: normal;
	// 	font-weight: 400;
	// 	line-height: normal;
	// 	letter-spacing: 0.28px;
	// 	margin-left: -70rpx;
	// }

	.cont_bo {
		width: 100vw;
		height: 100vh;
		position: relative;

		.nullCard {
			position: absolute;
			width: 100%;
			height: 356rpx;
			border: 1px solid red;
			top: 340rpx;
			left: 0;

			.isnull_img {
				width: 50%;
				height: 246rpx;
				border: 1px solid green;
				margin: auto;
			}

			.isnull_text {
				text-align: center;
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-weight: 400;
				margin-top: 30rpx;
			}
		}

		.cardList {
			width: 100%;
			min-height: 100rpx;
			padding: 0rpx 20rpx 20rpx 20rpx;

			.cardList_item {
				// overflow: hidden;
				width: 100%;
				height: 282rpx;
				border-radius: 10rpx;
				background: #FFF;
				box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
				margin-top: 30rpx;
				position: relative;
				padding: 20rpx 0rpx 10rpx 0rpx;

				.closeIcon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #D1D1D1;
					font-size: 28rpx;
					color: #fff;
					position: absolute;
					right: -15rpx;
					top: -15rpx;
					text-align: center;
				}

				.item_t {
					width: 100%;
					height: 172rpx;
					position: relative;

					.item_t_bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 382rpx;
						height: 100%;
						background-image: linear-gradient(180deg, #E5E5E5 0%, rgba(229, 229, 229, 0.00) 100%);
						transform-origin: left bottom;
						transform: perspective(87rpx) scale(0.85, 0.85) rotateX(-7deg);
						border-radius: 10rpx 0rpx 0rpx 0rpx;
						z-index: 1;
					}

					.item_t_con {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 9;
						width: 100%;
						height: 100%;

						.fcon-suoding {
							color: #999;
						}

						.jiesou-style {
							width: 122.5rpx;
							padding: 0 15rpx;
							height: 50rpx;
							margin-left: 30rpx;
							flex-shrink: 0;
							border-radius: 18px;
							background: rgba(153, 153, 153, 0.20);

							.textstyles {
								color: #999;
								font-size: 28rpx;
								font-weight: 400;
								letter-spacing: -0.25px;
								margin-left: 5rpx;
							}
						}

						.con_top {
							display: flex;
							justify-content: space-between;
							padding: 30rpx 30rpx 10rpx 30rpx;

							.top_left_text {
								color: #666;
								font-family: "Microsoft YaHei UI";
								font-size: 32rpx;
								font-weight: 700;
								letter-spacing: 0.32px;
							}

							.top_left_p {
								color: #FF9700;
								font-family: "Microsoft YaHei UI";
								font-size: 48rpx;
								font-weight: 700;
								letter-spacing: 0.48px;
							}
						}

						.con_tel {
							padding: 0rpx 30rpx 0rpx 30rpx;
							color: #666;
							font-family: "Microsoft YaHei UI";
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: -0.25px;
						}
					}
				}

				.invs_b {
					width: 100%;
					height: 2rpx;
					background-color: #F3F3F3;
				}

				.item_bottoms {
					width: 100%;
					height: 58rpx;
					margin-top: 15rpx;
					display: flex;
					justify-content: space-between;
					padding: 0rpx 30rpx 0rpx 30rpx;

					.recharge {
						width: 154rpx;
						height: 100%;
						border-radius: 36rpx;
						border: 2rpx solid #53A87F;
						background: #FFF;
						text-align: center;
						line-height: 57rpx;
						color: #53A87F;
					}

					.defPay {
						display: flex;

						.defSwitch {
							width: 70rpx;
							height: 36rpx;
							border-radius: 24rpx;
							margin-right: 20rpx;
							position: relative;

							.acSwitch {
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								position: absolute;
								top: 5rpx;
								right: 8rpx;
								background-color: #58AB83;
							}

							.unact {
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								position: absolute;
								top: 5rpx;
								left: 8rpx;
								background-color: rgba(153, 153, 153, 0.70);
							}
						}

						.swi_text {
							color: #666;
							text-align: center;
							font-family: ABeeZee;
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0.28px;
							margin-right: 20rpx;
						}

						.inv_ss {
							width: 3rpx;
							height: 24rpx;
							background-color: #666;
							margin-top: 6rpx;
							margin-right: 20rpx;
						}

						.jb_text {
							color: #666;
							text-align: center;
							font-family: "Microsoft YaHei UI";
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0.28px;
						}
					}
				}
			}
		}
	}

	.botm_btns {
		position: absolute;
		width: 622rpx;
		height: 84rpx;
		border-radius: 20rpx;
		background: #53A87F;
		left: 60rpx;
		bottom: 40rpx;
		text-align: center;
		color: #FFF;
		line-height: 84rpx;
		font-size: 32rpx;
	}

	.modelcon {
		width: 526rpx;
		height: 330rpx;
		padding-top: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.favs {
			text-align: center;
			color: #000;
			font-family: "Microsoft YaHei UI";
			font-size: 36rpx;
			font-weight: 700;
		}

		.fav_v {
			padding: 20rpx 25rpx 0rpx 25rpx;
			text-align: center;
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;
		}

		.foot_btn {
			display: flex;
			position: absolute;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			justify-content: center;
			.btns {
				width: 208rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
			}

			.su {
				background: #5DB175;
				color: #fff;
			}

			.can {
				border: 2rpx solid #5DB175;
				color: #5DB175;
			}
		}

		.card-btn {
			justify-content: center !important;
		}
	}

	.card-popup {
		height: 370rpx;
	}

	.mbtnwykk {
		// background-color: #fff;
		width: calc(100% - 80rpx);
		margin-left: 40rpx;
		height: 90rpx;
		line-height: 91rpx;
		// background-color: #fff;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #333;
		
	}
	.morbox {
		position: absolute;
		width: 240rpx;
		height: 0;//128rpx  158rpx
		line-height: 64rpx;
		left: 0;
		bottom: 40rpx;
		z-index: 20;
		padding:0;
		overflow: hidden;
		padding:0 20rpx 0 20rpx;
		// transform-origin: left bottom;
		
		&.show{
			height: auto;
			transition: height 0.1s ease-out;
		}
		&.down{
			transform-origin: center top;
			
		}
		.mctbox{
			border-radius: 2px 2px 4px 4px;
			// height: 128rpx;//128rpx
			padding:40rpx 0;
			box-shadow: 0px 3rpx 6rpx -4rpx rgba(0, 0, 0, 0.12), 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.08), 0px 9rpx 20rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		.act{
			background: rgba(76, 162, 123, 0.10);
			color: rgba(76, 162, 123, 0.85);
		}
		
	}
	
	.sanjiao {
		position: relative;
		&.up{
			&:before{
				border-top: none;
				top: -16rpx;
				border-bottom-color: #fff;
			}
		}
		&:before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			align-self: center;
			position: absolute;
			border: 16rpx solid transparent;
			bottom: -16rpx;
			left: 28rpx;
			border-bottom: none;
			
			border-top-color: #fff;
			z-index: 1;
		}
	
	}
	.mpitm:nth-child(n+2){
		margin-top: 10rpx;
	}
</style>